<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>zbus = mq + rpc</title>
<script type="text/javascript" src="jquery.js?cmd=js"></script>
<script type="text/javascript" src="jquery-ui.js?cmd=js"></script>
<script type="text/javascript" src="bootstrap.js?cmd=js"></script>
<script type="text/javascript" src="base.js?cmd=js"></script>
<script type="text/javascript" src="zbus.js?cmd=js"></script>
<link rel="stylesheet" href="bootstrap.css?cmd=css" type="text/css">
<link rel="stylesheet" href="base.css?cmd=css" type="text/css">

</head>
<body> 

<script type="text/javascript">  

var address = '{{trackerAddress}}';
var sslEnabled = '{{sslEnabled}}';
var tokenName = '{{tokenName}}';  
var token = getCookie('token');


var trackerAddress = {
	address: address, 
	sslEnabled: sslEnabled=='true',
	token: token
};  

</script>

<div class="header">

<nav class="navbar navbar-inverse navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>  
            
            <a class="navbar-brand" href="/">  
                <img src="logo.svg?cmd=img" />
                <span id="symbol">zbus</span> 
            </a> 
            
        </div>
        <div class="collapse navbar-collapse" id="navbar">
             <ul class="nav navbar-nav">  
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a target="_blank" href="http://zbus.io/">Doc</a></li>
                <li><a target="_blank" href="http://git.oschina.net/rushmore/zbus">Source</a></li>
                <li><a target="_blank" href="http://github.com/rushmore/zbus">Github</a></li>
                <li class="hidden-xs"><p class="navbar-text"><span class="label label-success" id="version"></span></p></li>
            	<li id="logout"><a href='?cmd=logout'><span></span> Logout</a></li>
            </ul> 
        </div>
    </div>
</nav>
</div>
 
<div class="nodes container-fluid" style="margin-bottom:30px;">   
  
  
<div class="row">
    <div class="col-md-12">
        <span class="label label-primary">Tracked Servers</span>
    </div> 
    <div class="col-md-12">
        <table id="server-list"  class="table table-condensed table-bordered">
            <tbody>
            <tr> 
                <th style="width: 16%">Server Address 
                <div class="filter-box">
                	<input id="filter-server" type='checkbox' checked="checked">
                </div>
                </th> 
                <th style="width: 8%">Version</th> 
	            <th style="width: 8%">InfoVersion</th> 
                <th>Topics</th>
            </tr>  
        	</tbody>
        </table>
    </div> 
</div>   

<div class="row">
    <div class="col-md-12">
        <div class="cap"><span class="label label-primary">Message Queues</span></div> <div class="op2"><a class='topic' data-toggle='modal' data-target='#add-topic-modal'>&#43;</a></div>
    </div>
</div> 
 

<div class="row">
    <div class="col-md-12 table-responsive">
        <table id="topic-list" class="table-outter tgroup"> 
			<tbody>  
				<tr class="header-ctrl">
					<td><div class="td">Topic</div></td>
					<td>
						<table class="table-nested sgroup">
							<tr>
								<td><div class="td">In Server</div></td>
								<td><div class="td">Message Depth</div></td> 
								<td>
									<table class="table-nested cgroup">
									<tr>
										<td><div class="td">ConsumeGroup</div></td>
										<td><div class="td">Message Unconsumed</div></td> 
										<td><div class="td">Consumer</div></td> 
										<td><div class="td">Message Filter</div></td>  
									</tr> 
								</table>  
								</td> 
							</tr> 
						</table> 
					</td>
				</tr>
				<!-- body --> 
				
			</tbody>
		</table>
    </div>
</div>

 

</div> 


<div id="add-topic-modal" class="modal"  tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg add-topic-modal" role="document">
    <div class="modal-content"> 
    	<div class="modal-header"> 
    		<div class="caption"><span id="add-topic-caption"></span> 
    		</div>  
    		<div class="close-box"><span class="topic label label-info" data-dismiss="modal" aria-label="Close">x</span></div>
     	</div>      
        <div class="add-topic-content"> 
            <div>
                <span>Topic:</span> 
                <input type="text" class="topic-item" id="topic-name" value="" class="text">
            </div> 
            <div>
                <span>Mask:</span> 
                <input type="text" class="topic-item" id="topic-mask" placeholder="optional" value="" class="text">  
                <button onclick="mqDeclare()">Declare</button>
            </div> 
            <hr />
            <span>Servers:</span> 
            <div class="target-server-list">  
            </div>
        </div>
    </div>
  </div>
</div>


<div id="remove-topic-modal" class="modal"  tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg add-topic-modal" role="document">
    <div class="modal-content"> 
    	<div class="modal-header"> 
    		<div class="caption"><span id="remove-topic-caption"></span> 
    		</div>  
    		<div class="close-box"><span class="topic label label-info" data-dismiss="modal" aria-label="Close">x</span></div>
     	</div>  
        <div class="add-topic-content">  
            <div> 
                <input id="remove-topic-name" value="" type="hidden"/>
                <button class="btn btn-danger" onclick="mqRemove()">Delete</button>
            </div> 
            <hr />
            <span>Servers:</span> 
            <div class="target-server-list">  
            </div>
        </div>
    </div>
  </div>
</div>
 
<script type="text/javascript"> 
var broker = null;
var filterServerList = [];  

function mqDeclare(){ 
	var topic = $("input#topic-name").val();
    if(topic == ""){
        alert("topic empty");
        return;
    }
    var mask = $("input#topic-mask").val();
    var msg = { topic: topic, token: token };
    if(mask != null && mask != ""){
        msg.topicMask = mask;
    }
    var admin = new MqAdmin(broker);
    admin.declare(msg); 

    $("#add-topic-modal").modal("hide");
} 

function mqRemove(){  
    var topic = $("input#remove-topic-name").val();
    var msg = { topic: topic, token: token }; 
    var admin = new MqAdmin(broker);
    admin.remove(msg); 

    $("#remove-topic-modal").modal("hide");
} 
 
 

$(document).ready(function(){    

if(tokenName != "") {
    $("#logout span").text(tokenName); 
} else {
	$("#logout").addClass("hide");
}
    
function updateTrackerInfo(){
	filterServerList = [];
    $("#server-list input.server").each(function(data){
    	var checked = $(this).is(":checked");
    	if(checked){ 
            var ssl = $(this).attr("sslEnabled");
            var address = $(this).val(); 
    		filterServerList.push({address:address, sslEnabled: ssl=="true"});
    	} 
    });  
    
    if(broker){  
    	showTopicTable(broker.routeTable.topicTable, filterServerList);
    } 
} 


$("#filter-server").change(function() {
	var checked = $(this).is(":checked");
	$("#server-list input.server").prop("checked", checked);   
	
	updateTrackerInfo();
});  

$("#server-list").on("change", "input.server", function() {
	var checked = $(this).is(":checked");
	$(this).prop("checked", checked);  
   
    updateTrackerInfo(); 
});  

broker = new Broker();   
trackerAddress.token = token;

broker.addTracker(trackerAddress);  
broker.onTrackerUpdated = function(trackerInfo){
    trackerAddress = trackerInfo.serverAddress;

    $("#version").text("v"+trackerInfo.serverVersion); 
    filterServerList = [];
    for(var key in trackerInfo.serverTable){
        var serverInfo = trackerInfo.serverTable[key];
        filterServerList.push(serverInfo.serverAddress);
    }
};

broker.onServerUpdated = function(){
    showServerTable(broker.routeTable.serverTable, filterServerList, trackerAddress);
    showTopicTable(broker.routeTable.topicTable, filterServerList); 
};  

////////////////////modal actions/////////////////////

$("#add-topic-modal").draggable({ handle:'.modal-header'}); 
$("#add-topic-modal").on("show.bs.modal", function(e){  
	$(this).find('.modal-content').css({
        width:'auto', //probably not needed
        height:'auto', //probably not needed  
        'max-height':'100%'
	});  
	$("#add-topic-caption").text("Declare Topic");   
    $(".target-server-list div").remove();
    for(var i in filterServerList){
        var server = filterServerList[i];
        $(".target-server-list").append("\
            <div>\
            <input type='checkbox' checked='checked value=''>\
            <a class='link'>" + server.address + "</a>\
            </div>\
        ");
    } 
});

$("#remove-topic-modal").draggable({ handle:'.modal-header'}); 
$("#remove-topic-modal").on("show.bs.modal", function(e){  
	$(this).find('.modal-content').css({
        width:'auto', //probably not needed
        height:'auto', //probably not needed  
        'max-height':'100%'
	});  
    var link = $(e.relatedTarget);
    var topic = link.data('topic');
	$("#remove-topic-caption").text("Remove topic: " + topic);  
    $("#remove-topic-name").val(topic);
    $(".target-server-list div").remove();
    for(var i in filterServerList){
        var server = filterServerList[i];
        $(".target-server-list").append("\
            <div>\
            <input type='checkbox' checked='checked value=''>\
            <a class='link'>" + server.address + "</a>\
            </div>\
        ");
    } 
});



});


</script> 

</body>

</html>
